<template>
  <div>
    <div style="display: flex;padding-left: 100px;">
      <div v-for="(item, index) in rowData" :key="index" style="width:150px;padding-right: 50px;text-align: center">
        <div>{{ item.confirmeAddress }}</div>
      </div>
    </div>
    <div style="border-top:1px solid;border-bottom:1px solid;position: relative;">
    <!-- 时轴 循环体 -->
      <div v-for="(item,index) in timeList" :key="index" style="display: flex;height: 180px;width: 70px;justify-content: space-between;border-bottom:1px solid;box-sizing: content-box;">
        <div style="display: flex;align-items: center;flex: 1;justify-content: center;">
          <span>{{ item }}</span>
        </div>
        <div style="box-sizing:border-box;height: 180px">
          <div style="border-bottom:1px solid;height: 45px;line-height: 45px">00</div>
          <div style="border-bottom:1px solid;height: 45px;line-height: 45px">15</div>
          <div style="border-bottom:1px solid;height: 45px;line-height: 45px">30</div>
          <div style="height: 45px;line-height: 45px">45</div>
        </div>
      </div>
      <!-- 数据区 -->
      <div style="position: absolute;top:0">

        <!-- 车厂 循环体 start-->
        <div v-for="(itemA, indexA) in rowData" :key="indexA" style="position: absolute; width:150px;" :style="computedRoom(indexA)">
          <div style="position: relative">

            <!-- 交车数据 循环体 start -->
            <div v-for="(itemB, indexB) in itemA.boardElementVOList" :key="indexB" style="position: absolute;font-size: 10px;text-align:center;border:1px solid;box-sizing:content-box;width: 100%;" :style="computedPostion(itemB.deliveringDateStart)">
              <div>{{ preDateHandler(itemB.deliveringDateStart,'HH:mm') }}</div>
              <div>{{ itemB.salesVin}}</div>
              <div>{{ `销售顾问：${itemB.consultant}`}}</div>
              <div>{{ `客户：${itemB.costomerName}` }}</div>
            </div>
            <!-- <div style="position: absolute;font-size: 10px;text-align:center;border:1px solid;box-sizing:content-box;width: 100%;top:135px;">
              <div>9:30</div>
              <div>LFV3B2BR4H30578</div>
              <div>销售顾问：王芳</div>
              <div>444444444444</div>
            </div> -->
            <!-- 交车数据 循环体 end -->
          </div>
        </div>
      </div>
      <!-- 车厂 循环体 end-->
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'timeTableComponent',
  props: {
    rowData: {
      type: Array,
      default: () => ([{},{},{},{}])
    }
  },
  data () {
    return {
      timeList: this.createTimeList(),
      startTime: 8, // 8点
      endTime: 20, // 20点
    }
  },
  methods: {
    computedPostion(timer) {
      let hour = moment(Number(timer)).hour()
      let minute = moment(Number(timer)).minute()
      let topPx = hour >= 8 ? `${((hour - 8) * 4 + (minute / 15))*45}px` : '0px'
      return {'top': topPx}
    },
    computedRoom(number) {
      let leftPx = `${(number+1)*100}px`
      return {'left': leftPx}
    },
    createTimeList() {
      let list = []
      for(let i=8;i < 20;i++){
        list.push(i.toString().padStart(2, '0'))
      }
      return list
    },
    // 日期预处理
    preDateHandler(val, formatCode='YYYY-MM-DD HH:mm:ss') {
      let resultDate = val ? moment(Number(val)).format(formatCode) : val;
      if ((resultDate == 'Invalid date' || resultDate == 'Invalid Date') && val) {
        resultDate = moment(val).format(formatCode)
      }
      return resultDate;
    },
  }
}
</script>

<style lang="less" scoped>

</style>
